    <template>
    <div class="mod-order" style="margin: 10px">
        <!--查询面板-->
        <SearchPanel ref="searchPanel" :search-config="searchConfig" @startSearch="startSearch">
            <el-form-item>
                <el-button icon="el-icon-plus" type="primary" size="mini" @click="add">新增</el-button>
            </el-form-item>
        </SearchPanel>

        <!-- 查询结果 -->
        <ResultListPanel
            tableRef="table"
            ref="multipleTable"
            :checkBoxEnable="true"
            :data="dataList?dataList:[]"
            :listConfig="resultColConfig"
            :listLoading="listLoading"
            @actionClick="actionClick"
            @paginationChange="paginationChange"
            :tagTextExchange="tagTextExchange"
        ></ResultListPanel>
        <el-dialog
            :title="dialogTitle"
            :visible.sync="dialogVisible"
            width="40%"
            :before-close="handleClose"
        >
            <el-form
                :inline="false"
                :model="addForm"
                size="mini"
                class="demo-form-inline"
                label-width="120px"
                :rules="rules"
                ref="ruleForm"
            >
                <el-form-item label="业务系统id" prop="appId">
                    <el-input :disabled="type==2" v-model="addForm.appId" placeholder="请输入字母或数字"></el-input>
                </el-form-item>
                <el-form-item label="业务系统名称" prop="appName">
                    <el-input v-model="addForm.appName" placeholder="请输入业务系统名称"></el-input>
                </el-form-item>
                <el-form-item label="pid" prop="pid">
                    <el-input v-model="addForm.pid" placeholder="请输入pid"></el-input>
                </el-form-item>
                <el-form-item label="应用类型" prop="appType">
                    <el-select v-model="addForm.appType" placeholder="活动区域">
                        <el-option label="web应用" value="web"></el-option>
                        <el-option label="手机应用" value="app"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="回调地址">
                    <el-input v-model="addForm.callback" placeholder="请输入回调地址"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addAndEditSubmit('ruleForm')">保存</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>
      

    
    <script>
import { INDEX_SEARCH_CONFIG, INDEX_SEARCH_RESULT_ITEMS } from './config';
import ResultListPanel from '../../components/ResultListPanel';
import SearchPanel from '../../components/SearchPanel';
import API from '@/api';
import cloneDeep from 'lodash/cloneDeep';
export default {
    components: {
        ResultListPanel,
        SearchPanel
    },
    data() {
        var appidValdate = (rule, value, callback) => {
            var regex = /^[0-9a-zA-Z]{3,8}$/g;
            if (!regex.test(value)) {
                callback(new Error('请输入正确的appid'));
            } else {
                callback();
            }
        };
        return {
            dialogVisible: false,
            dialogTitle: '新增',
            // 搜索项配置
            searchConfig: INDEX_SEARCH_CONFIG,
            resultColConfig: INDEX_SEARCH_RESULT_ITEMS,
            listLoading: false, // 数据列表显示状态
            dataList: [], //  数据列表
            /* 分页查询数据 */
            pageSize: 10,
            pageNum: 1,
            totalPage: 0,
            /* 查询条件参数 */
            dataForm: {
                appName:''
            },
            addForm: {
                appId: '',
                appName: '',
                pid: '',
                appType: '',
                callback: ''
            },
            rules: {
                appId: [{ validator: appidValdate, required: true, trigger: 'blur' }],
                appName: [{ required: true, message: '请输入系统名称', trigger: 'blur' }],
                pid: [{ required: true, message: '请输入pid', trigger: 'blur' }],
                appType: [{ required: true, message: '请选择应用类型', trigger: 'change' }]
            },
            type: 1
        };
    },
    mounted() {
        this.getList();
    },
    methods: {
        /***
         * 触发 行操作按钮
         * @param data
         * @param item
         */
        actionClick([data, item]) {
            if (item.alias === 'edit') {
                this.Edit(data);
            } else if (item.alias === 'del') {
                this.delete(data);
            }
        },
        tagTextExchange(item) {
            var status = '';
            for (var k in item) {
                if (item[k].status == 0) {
                    status = '禁用';
                } else if (item[k].status == 1) {
                    status = '启用';
                }
            }
            return status;
        },
        handleClose() {
            this.clearForm()
            this.$refs['ruleForm'].resetFields();
            this.dialogVisible = false;
        },
        add() {
            this.type = 1;
            this.dialogVisible = true;
        },
        // 清空新增中的数据
        clearForm () {
                this.addForm = {
                appId: '',
                appName: '',
                pid: '',
                appType: '',
                callback: ''
            }
        },
        // 新增或编辑
        addAndEditSubmit(formName) {
            this.$refs[formName].validate(valid => {
                if (valid) {
                    // 新增
                    if (this.type == 1) {
                        API.systemManger.systemAdd(this.addForm).then(res => {
                            if (res.code == 20000000) {
                                this.$message({
                                    type: 'success',
                                    message: '新增成功'
                                });
                                this.clearForm()
                                this.getList();
                                this.dialogVisible = false;
                            } else {
                                this.$message.err(res.msg);
                            }
                        });
                    } else {
                        // 编辑
                        API.systemManger.systemEdit(this.addForm).then(res => {
                            if (res.code == 20000000) {
                                this.$message({
                                    type: 'success',
                                    message: '编辑成功'
                                });
                                this.clearForm()
                                this.getList();
                                this.dialogVisible = false;
                            } else {
                                this.$message.err(res.msg);
                            }
                        });
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        /**
         * 分页器发生改变
         * @param page
         */
        paginationChange(page) {
            this.pageSize = page.pageSize;
            this.pageNum = page.pageNo;
            this.getList();
        },
        /***
         * 搜索面板出发搜索事件
         * @param params
         */
        startSearch(params) {
            this.dataForm = params;
            this.pageNum = 1;
            this.$set(this.$refs.multipleTable['pageParams'], 'pageNum', 1);

            this.getList();
        },
        // 删除
        delete(row) {
            console.log(row);
            this.$alert('您确定要删除该条数据吗?', '', {
                confirmButtonText: '确定',
                callback: action => {
                    API.systemManger.systemDel({ appId: row.appId }).then(res => {
                        if (res.code == 20000000) {
                            this.$message({
                                type: 'success',
                                message: `删除成功`
                            });
                            this.getList();
                        }
                    });
                }
            });
        },
        // 编辑
        Edit(data) {
            this.type = 2;
            this.dialogVisible = true;
            console.log(data);
            this.addForm = {
                appId: data.appId,
                appName: data.appName,
                pid: data.pid,
                appType: data.appType,
                callback: data.callback
            };
        },
        getList() {
            let params = cloneDeep(this.dataForm);
            params.pageNum = this.pageNum;
            params.pageSize = this.pageSize;
            this.listLoading = true;
            API.systemManger.systemList(params).then(res => {
                this.listLoading = false
                this.totalPage = res.data.total;
                this.dataList = res.data.rows;
                this.$set(this.$refs.multipleTable['pageParams'], 'total', res.data.total);
            });
        }
    }
};
</script>
    
    <style>
</style>